<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>易骏云 - BI</title>
    <link href="css/iview.css" rel="stylesheet" />
    <link href="css/vant.css" rel="stylesheet" />
    <link href="css/vue_vant.css" rel="stylesheet" />
    <link rel="stylesheet" href="image/icon/iconfont.css" />
    <style>
        .fontSize18 {
            font-size: 18px;
        }

        .fontSize16 {
            font-size: 16px;
        }

        .textLeft {
            text-align: left;
            padding-left: 5px;
        }

        .textRight {
            text-align: right;
            padding-right: 10px;
        }

        .textCenter {
            text-align: center;
        }

        .texteee {
            color: #999;
        }

        .marginLeft {
            margin-left: 5px;
        }

        .line30 {
            line-height: 30px;
        }

        .paddingleft {
            padding-left: 8px;
        }

        .padding8 {
            padding: 0 8px;
        }

        .activation-code-manage {
            background: white;
            overflow: hidden;
            height: calc(100vh - 95px);
            display: flex;
            flex-direction: column;
        }

        .activation-code-manage .total {
            height: 20px;
            line-height: 20px;
            font-size: 20;
            font-weight: 600;
            margin: 5px 15px;
        }

        .activation-code-manage .list-wrapper {
            flex: 1;
            background: white;
            overflow: auto;
            margin: 5px 15px;
            position: relative;

        }

        .activation-code-manage .list-wrapper .header {
            background: #eee;
            /* color: white; */
            border: none;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .activation-code-manage ul {
            min-width: 450px;
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .activation-code-manage li {
            width: 100px;
            font-weight: 500;
            text-align: center;
        }

        .activation-code-manage .column-large {
            width: 60px;
        }

        .tabs {
            line-height: 20px;
        }

        .tabs .van-col {
            text-align: center;
        }

        .tabs .van-tabs--line .van-tabs__wrap {
            height: 30px;
        }

        .borderRight {
            border-right: 1px solid #eee;
        }

        .border_Bot {
            border-bottom: 1px solid #eee;
        }

        .padding3 {
            padding: 3px 0;
        }

        .screen {
            text-align: center;
            font-size: 0.8rem;
            position: relative;
        }

        .screen i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 15px;
        }

        .img {
            width: 50px;
        }

        .van-dialog {
            background: none;
        }

        .van-dialog .van-dialog__content {
            position: relative;
            height: 300px;
        }

        .imgEnlarged {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
        }

        .screeTit {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #646566;
            border-bottom: 1px solid #ccc;
        }

        .condiName {
            line-height: 30px;
            padding-left: 5px;
        }

        .condiList {
            background: #ccc;
            line-height: 25px;
            height: 25px;
            margin-bottom: 5px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .selectScree .condiList {
            background: #f8ddaa;
            color: orange;
            border-color: #f8ddaa;
        }

        .rakingHeader {
            line-height: 25px;
            padding: 5px 0;
        }

        .returnBtn {
            position: relative;
            padding-left: 25px;
        }

        .returnBtn img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
            width: 20px;
        }

        .screeInput {
            padding: 0px 5px;
            background: #eee;
            line-height: 27px;
            overflow: hidden;
        }

        .screeInput i {
            color: orange;
            font-size: 20px;
            display: flex;
            align-items: center;
            height: 27px;
        }

        .screeInput input {
            background: #eee;
            border: none;
            font-size: 14px;
            color: black;
            padding-left: 5px;
        }

        .refresh {
            text-align: center;
            width: 50px;
            height: 26px;
            line-height: 26px;
            border: 1px solid orange;
            color: orange;
            border-radius: 4px;
        }

        .rem8 {
            font-size: 0.8rem;
        }

        .shop_S {
            display: flex;
            margin-left: 10px;
            font-weight: bold;
            font-size: 14px;
        }

        .shop_I {
            width: 30%;
        }

        .shopActives {
            color: orange;
        }

        .cancelshaop {
            display: flex;
            justify-content: space-around;
        }

        /* .canposre{
            position: relative;
        } */
        /* .canpos{
            position: absolute;
        } */
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="ranking">
            <van-row gutter="10" class="border_Bot rakingHeader">
                <van-col span="5" @click="window.history.go(-1)" class="textLeft returnBtn">
                    <img src="img/icon_返回@1x.png" alt="" /><span class="rem8">返回</span>
                </van-col>
                <van-col span="15">
                    <div style="color:#000;font-weight: bold;text-align: center;font-size: 18px;">综合分析</div>
                </van-col>
                <van-col span="4" class="textRight">
                    <div class="refresh" @click="getList">
                        刷新
                    </div>
                </van-col>
            </van-row>
            <div class='dataTop clear'>


            </div>
            <van-row class="border_Bot padding3" style="margin-left:-20px;">
                <van-col span="24" class="tabs borderRight">
                    <van-tabs v-model="active" title-active-color="orange" @click="getSelectValue">
                        <van-tab :title=N.name v-for="(N,index) in tabsList" :key="N.id" />
                    </van-tabs>
                </van-col>
            </van-row>
            <van-row class="border_Bot padding3" gutter="10" style="margin-left:-20px;" v-if="active == 0">
                <van-col span="16" class="tabs">
                    <van-tabs v-model="regional" title-active-color="orange" line-height="0" @click="select">
                        <van-row title-active-color="orange" line-height="0">
                            <van-col><van-tab :name="1" title="商品订货统计" /></van-col>
                            <van-col><van-tab :name="2" title="取消商品" /></van-col>
                        </van-row>
                    </van-tabs>
                </van-col>
            </van-row>


            <!-- 商品状态 -->
            <div class="shop_S" v-if="regional == 1">
                <div class="shop_I">商品状态:</div>
                <div class="shop_I" v-for="(sP,INDEX) in shopStatus" :key="sP.id"
                    :class="{'shopActives':sP.id == shopActiveIndex}" @click="shopSetActive(sP)">{{sP.name}}</div>
                <div class="shop_I" style="display: flex;">颜色<van-checkbox plain v-model="checked"
                        checked-color="#07c160" style="margin-left:15px;" @click="colorValue(checked)"></van-checkbox>
                </div>
            </div>

            <!-- 门店状态 -->
            <div class="shop_S" style="margin-top:20px;" v-if="regional == 1">
                <div class="shop_I">门店状态:</div>
                <div class="shop_I" v-for="(fsP,INDEX) in floorStatus" :key="fsP.id"
                    :class="{'shopActives':fsP.id == shopActivefsPIndex}" @click="shopSetfsPActives(fsP)">{{fsP.name}}
                </div>
                <div class="shop_I" style="display: flex;">尺码<van-checkbox style="margin-left:15px;" plain
                        v-model="checked2" checked-color="#07c160" @click="colorValue2(checked2)"></van-checkbox></div>
            </div>



            <div class="shop_S" style="margin-top:20px;" v-if="regional == 1">
                <div class="shop_I">汇总方式:</div>
                <div class="shop_I" v-for="(fsPhz,INDEX) in floorHzStatus" :key="fsPhz.id"
                    :class="{'shopActives':fsPhz.id == shopActivefhzsPIndex}" @click="shopSethzfsPActives(fsPhz)">
                    {{fsPhz.name}}</div>
                <!-- <div class="shop_I">代理商</div>
                <div class="shop_I">门店</div> -->
                <div class="shop_I" @click="openScreen">
                    <div style="display: flex;align-items: center;"><img src="img/filters.png" alt="" class="imgcoms"
                            style="width:30px;height:30px;" />筛选</div>
                </div>
            </div>

            <!-- 取消商品操作 -->
            <div class="cancelshaop" v-if="regional ==2">
                <div class="cancelItem">序号
                    <div class="canposre">
                        <div class="canpos">
                            <img @click="sortAscending" src="img/shengxu.png"
                                style="width:20px;height:20px;position:absolute;top:108px;left:37px;" />
                            <img @click="sortDescending" src="img/jiangxu.png"
                                style="width:20px;height:20px;position:absolute;top:116px;left:37px;" />
                        </div>
                    </div>
                </div>
                <div class="cancelItem">订货数量
                    <div class="canposre">
                        <div class="canpos">
                            <img @click="sortAscending1" src="img/shengxu.png"
                                style="width:20px;height:20px;position:absolute;top:108px;left:117px;" />
                            <img @click="sortDescending1" src="img/jiangxu.png"
                                style="width:20px;height:20px;position:absolute;top:116px;left:117px;" />
                        </div>
                    </div>
                </div>
                <div class="cancelItem">吊牌金额
                    <div class="canposre">
                        <div class="canpos">
                            <img src="img/shengxu.png"
                                style="width:20px;height:20px;position:absolute;top:108px;left:195px;" />
                            <img src="img/jiangxu.png"
                                style="width:20px;height:20px;position:absolute;top:116px;left:195px;" />
                        </div>
                    </div>
                </div>
                <div class="cancelItem">订货金额
                    <div class="canposre">
                        <div class="canpos">
                            <img src="img/shengxu.png"
                                style="width:20px;height:20px;position:absolute;top:108px;left:274px;" />
                            <img src="img/jiangxu.png"
                                style="width:20px;height:20px;position:absolute;top:116px;left:274px;" />
                        </div>
                    </div>
                </div>

                <div @click="openScreen" style="margin-top:-5px;">
                    <div style="display: flex;align-items: center;"><img src="img/filters.png" alt="" class="imgcoms"
                            style="width:30px;height:30px;" />筛选</div>
                </div>
            </div>




            <!-- 订货排名 -->
            <van-row class="border_Bot padding3" v-if="active == 1">
                <div style="display:flex;justify-content: space-between;">

                    <van-col span="" class="tabs borderRight">
                        <van-tabs title-active-color="orange" line-height="0" @click="select">
                            <van-tab :name=1 title="全国序号排名" />
                        </van-tabs>
                    </van-col>
                    <div @click="openScreen" style="margin-right:20px;">
                        <div style="display: flex;align-items: center;"><img src="img/filters.png" alt=""
                                class="imgcoms" style="width:30px;height:30px;" />筛选</div>
                    </div>
                </div>

            </van-row>


            <!-- 综合排名 -->
            <van-row class="border_Bot padding3" v-if="active == 2">
                <van-col span="" class="tabs borderRight">
                    <van-tabs title-active-color="orange" v-model="commonnums" line-height="0"
                        @click="selectcommonnums">
                        <van-tab :name=1 title="门店订货排名" />
                        <van-tab :name=2 title="区域订货排名" />
                        <van-tab :name=3 title="颜色统计分析" />
                        <van-tab :name=4 title="尺码统计分析" />
                    </van-tabs>
                </van-col>

            </van-row>
            <div @click="openScreen" style="margin-right:20px;" v-if="active == 2">
                <div style="display: flex;align-items: center;justify-content: flex-end;"><img src="img/filters.png"
                        alt="" class="imgcoms" style="width:30px;height:30px;" />筛选</div>
            </div>
            <div class="activation-code-manage" v-if="regional ==1">
                <div class="list-wrapper">
                    <ul class="header">
                        <!-- <li class="column-large">排名</li>
                        <li class="img">图片</li>
                        <li>我的订量</li> -->
                        <li>款号</li>
                        <li>款名</li>
                        <li>颜色编号</li>
                        <li>尺寸组</li>
                        <li>尺寸名称
                        </li>
                        <li>经销商名称</li>
                        <li>店铺名称</li>
                        <li>订货数量</li>
                        <li>订货价</li>
                        <li>订货金额</li>
                        <li>吊牌价</li>
                        <li>吊牌金额</li>
                        <li>排名</li>
                    </ul>
                    <van-list finished-text="没有更多了">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.style }}</li>
                            <!-- <li @click="enlarged(item)"><img class="img" :src="imgurl + item.image1_path" /></li> -->
                            <li>{{ item.stylename}}</li>
                            <li>{{ item.clr }}</li>
                            <li>{{ item.sizegname }}</li>
                            <li>{{ item.sizename }}</li>
                            <li>{{ item.buyername }}</li>
                            <li>{{ item.storename }}</li>

                            <li>{{ item.qty}}</li>
                            <li>{{ item.fprice }}</li>
                            <li>{{ item.famount }}</li>
                            <li>{{ item.dprice }}</li>
                            <li>{{ item.damount }}</li>
                            <li>{{ item.rankno }}</li>
                        </ul>
                    </van-list>
                    <ul>
                        <li class="column-large">共{{dataList.length}}行</li>
                        <li></li>
                        <!-- <li>{{sum}}</li> -->
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>



            <div class="activation-code-manage" v-if="regional ==2">
                <div class="list-wrapper">
                    <ul class="header">

                        <li>序号</li>
                        <li>款号</li>
                        <li>款名</li>
                        <li>颜色编号</li>
                        <li>订货数量</li>
                        <li>订货金额</li>
                        <li>吊牌金额</li>
                    </ul>
                    <van-list finished-text="没有更多了">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li>{{ item.index }}</li>
                            <li>{{ item.style}}</li>
                            <li>{{ item.stylename }}</li>
                            <li>{{ item.clr ? item.clr :"-"}}</li>
                            <li>{{ item.qty }}</li>
                            <li>{{ item.famount }}</li>
                            <li>{{ item.damount }}</li>
                        </ul>
                    </van-list>
                    <ul>
                        <li class="column-large">共{{dataList.length}}行</li>
                        <li></li>
                        <!-- <li>{{sum}}</li> -->
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

            <!-- 订货排名下的操作 -->
            <div class="activation-code-manage" v-if="active ==1">
                <div class="list-wrapper">
                    <ul class="header">
                        <li class="column-large">款号</li>
                        <li class="img">款号名称</li>
                        <li class="img">颜色编号</li>
                        <li>尺寸组</li>
                        <li>尺寸名称</li>
                        <li>订货数量</li>
                        <li>订货金额</li>
                        <li>吊牌金额</li>
                    </ul>
                    <van-list finished-text="没有更多了">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.style }}</li>
                            <li>{{ item.stylename}}</li>
                            <li>{{ item.clr }}</li>
                            <li>{{ item.sizegname }}</li>
                            <li>{{ item.sizename }}</li>
                            <li>{{ item.qty }}</li>
                            <li>{{ item.famount }}</li>

                            <li>{{ item.damount}}</li>
                        </ul>
                    </van-list>
                    <ul>
                        <li class="column-large">共{{dataList.length}}行</li>
                        <li></li>
                        <!-- <li>{{sum}}</li> -->
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

            <!-- 综合分析下的操作 -->
            <div class="activation-code-manage" v-if="active ==2 ">
                <div class="list-wrapper">
                    <ul class="header" v-if="commonnums ==1">
                        <li class="column-large">编号</li>
                        <li class="img">排名</li>
                        <li class="img">门店编号</li>
                        <li>门店名称</li>
                        <li>区域</li>
                        <li>订货数量</li>
                        <li>吊牌金额</li>
                        <li>订货金额</li>
                        <li>指标金额</li>
                        <li>指标款金额</li>
                        <li>金额达标率</li>
                        <li>量吊牌均价</li>
                        <li>订货款数</li>
                        <li>订货款色数</li>
                    </ul>
                    <ul class="header" v-if="commonnums ==2">
                        <li class="img">区域</li>
                        <li class="img">订单数量</li>
                        <li>吊牌金额</li>
                        <li>订货金额</li>
                    </ul>
                    <ul class="header" v-if="commonnums ==3">
                        <li class="img">颜色编号</li>
                        <li class="img">颜色名称</li>
                        <li>开发款数</li>
                        <li>已订款数</li>
                        <li>款数占比</li>
                        <li>订货数量</li>
                        <li>数量占比</li>
                        <li>订货金额</li>
                        <li>订货额占比</li>
                        <li>吊牌金额</li>
                        <li>吊牌额占比</li>
                        <li>下单门店数</li>
                    </ul>
                    <ul class="header" v-if="commonnums ==4">
                        <li class="img">尺码编号</li>
                        <li class="img">尺码名称</li>
                        <li>开发款数</li>
                        <li>已订款数</li>
                        <li>款数占比</li>
                        <li>订货数量</li>
                        <li>数量占比</li>
                        <li>订货金额</li>
                        <li>订货额占比</li>
                        <li>吊牌金额</li>
                        <li>吊牌额占比</li>
                        <li>下单门店数</li>
                    </ul>
                    <van-list finished-text="没有更多了" v-if="commonnums ==1">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.index }}</li>
                            <li>{{ item.rank}}</li>
                            <li>{{ item.store }}</li>
                            <li>{{ item.storename }}</li>
                            <li>{{ item.areaname }}</li>
                            <li>{{ item.sizename }}</li>

                            <li>{{ item.qty_all}}</li>
                            <li>{{ item.damount }}</li>
                            <li>{{ item.famount }}</li>
                            <li>{{ item.rate }}</li>
                            <li>{{ item.aprice }}</li>
                            <li>{{ item.cnt_style }}</li>
                            <li>{{ item.cnt_skc }}</li>
                            <li>{{ item.rankno }}</li>
                        </ul>
                    </van-list>

                    <van-list finished-text="没有更多了" v-if="commonnums ==2">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.areaname }}</li>
                            <li>{{ item.qty_all}}</li>
                            <li>{{ item.damount }}</li>
                            <li>{{ item.famount }}</li>
                        </ul>
                    </van-list>

                    <van-list finished-text="没有更多了" v-if="commonnums ==3">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.clr }}</li>
                            <li>{{ item.clrname}}</li>
                            <li>{{ item.cnt_style_all }}</li>
                            <li>{{ item.cnt_style_d }}</li>
                            <li>{{ item.rate_style}}</li>
                            <li>{{ item.qty_all }}</li>
                            <li>{{ item.rate_qty }}</li>
                            <li>{{ item.famount }}</li>
                            <li>{{ item.rate_famount }}</li>
                            <li>{{ item.damount}}</li>
                            <li>{{ item.rate_damount }}</li>
                            <li>{{ item.cnt_storeid_d }}</li>
                        </ul>
                    </van-list>

                    <van-list finished-text="没有更多了" v-if="commonnums ==4">
                        <ul v-for="(item, index) in dataList" :key="item.id">
                            <li class="column-large">{{ item.sizecode }}</li>
                            <li>{{ item.sizename}}</li>
                            <li>{{ item.cnt_style_all }}</li>
                            <li>{{ item.cnt_style_d }}</li>
                            <li>{{ item.rate_style}}</li>
                            <li>{{ item.qty_all }}</li>
                            <li>{{ item.rate_qty }}</li>
                            <li>{{ item.famount }}</li>
                            <li>{{ item.rate_famount }}</li>
                            <li>{{ item.damount}}</li>
                            <li>{{ item.rate_damount }}</li>
                            <li>{{ item.cnt_storeid_d }}</li>
                        </ul>
                    </van-list>
                    <ul>
                        <li class="column-large">共{{dataList.length}}行</li>
                        <li></li>
                        <!-- <li>{{sum}}</li> -->
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>

            <van-dialog v-model="imgEnlarged" :close-on-click-overlay="true" title="标题" show-cancel-button
                overlay-class="enlarged" :title="false" :show-confirm-button="false" :show-cancel-button="false">
                <img class="imgEnlarged" :src="url" />
            </van-dialog>
            <van-popup v-model="screeShow" position="right" @click-overlay="getScreen"
                :style="{ height: '100%', width: '80%' }">
                <div class="screeTit">款式过滤条件</div>
                <div class="border_Bot" v-for="(item, index) in stylesList" :key="item.id">
                    <div class="condiName">{{item.attribdefname}}</div>
                    <van-row gutter="20" class="padding8">
                        <van-col v-for="itemData in item.attribs" :key="itemData.id" span="8"
                            @click="filtration(item, index, itemData)"
                            :class="selectScreeList[index].includes(itemData.id) ? 'selectScree': ''">
                            <div class="condiList">{{itemData.attribname}}</div>
                        </van-col>
                    </van-row>
                </div>
            </van-popup>
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/iview.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    dateActive: '1',
                    active: '1',
                    rData: {
                        dtlist: []
                    },
                    url: '',
                    access_token: '',
                    shopActiveIndex: 2,//商品状态
                    shopActivefsPIndex: 2,//门店状态
                    shopActivefhzsPIndex: 2,
                    begin_end_date: [],
                    show: false,
                    showM: false,
                    minDate: new Date(2010, 0, 1),
                    maxDate: new Date(),
                    currentDate: new Date(),
                    billdate: '',
                    dataList: [],
                    checked: 0,
                    checked2: 0,
                    rankingAmount: 1,
                    stylesRanking: 1,
                    regional: 1,
                    sum: 0,
                    imgEnlarged: false,
                    url: '',
                    screeShow: false,
                    currIndex: "",
                    stylesList: [],//款式过滤条件
                    stylesListcv: [],
                    selectScreeList: [],//存放所有选中的筛选条件
                    queryTest: '',
                    shopStatus: [{
                        id: 0,
                        name: '全部'
                    },
                    {
                        id: 1,
                        name: '未订'
                    },
                    {
                        id: 2,
                        name: '已订'
                    }],
                    isAscending: true, // 默认升序
                    isAscending1: true, // 默认升序
                    dataLists: [],
                    floorStatus: [{
                        id: 0,
                        name: '全部'
                    },
                    {
                        id: 1,
                        name: '未订'
                    },
                    {
                        id: 2,
                        name: '已订'
                    }],
                    floorHzStatus: [{
                        id: 0,
                        name: '渠道'
                    },
                    {
                        id: 1,
                        name: '代理商'
                    },
                    {
                        id: 2,
                        name: '门店'
                    }],
                    tabsList: [{
                        id: "1",
                        name: '我的订单'
                    },
                    {
                        id: "2",
                        name: '订货排名'
                    },
                    {
                        id: "3",
                        name: '综合分析'
                    }
                    ],
                    imgurl: 'https://hz.enginesoft.cn/eboss_yun/server',
                    commonnums: ""
                };
            },
            watch: {
                // 监听简单数据类型
                active(newVal, oldVal) {
                    this.getList()
                }
            },
            methods: {
                select(index, title) {
                    this.getList()
                },
                selectcommonnums(index, title) {
                    console.log('index', index)
                    this.commonnums = index;
                    this.getList()
                },
                filtration(item, index, listitem) {
                    let num = this.selectScreeList[index].findIndex(i => i === listitem.id);
                    if (num > -1) {
                        this.selectScreeList[index].splice(num, 1)
                    } else {
                        this.selectScreeList[index].push(listitem.id)
                    }
                },
                shopSetActive(shopIndex) {
                    this.shopActiveIndex = shopIndex.id;
                    this.getList();
                },
                shopSetfsPActives(shopIndex) {
                    console.log('shopIndex', shopIndex.id)
                    this.shopActivefsPIndex = shopIndex.id;
                    this.getList();
                },
                shopSethzfsPActives(shopIndex) {
                    console.log('shopIndex', shopIndex.id)
                    this.shopActivefhzsPIndex = shopIndex.id;
                    this.getList();
                },
                openInstitutions() {

                },
                getSelectValue(Event) {
                    this.active = Event;
                    this.regional = 3;
                    console.log('this.active', this.active);
                    this.getList();
                },
                colorValue(coloer_E) {
                    console.log('coloer_E', coloer_E);
                    this.checked = coloer_E == true ? 1 : 0;
                    this.getList()
                },
                getCm() {
                    let that = this
                    const orderidValue = this.getQueryParam('orderid');
                    $.ajax({
                        url: 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx',
                        type: "post",
                        data: JSON.stringify({
                            api: "dhh_GetSize.t",
                            token: this.token,
                            order: orderidValue
                        }),
                        success: (res) => {
                            if (res.code == 200) {
                                that.stylesListcv = res.data;
                                const matchedSizes = this.matchAllSizes(that.stylesListcv, that.dataList);
                                console.log('matchedSizes ', that.dataList)
                            } else {
                                that.$Message.error({
                                    content: "暂无数据",
                                    duration: 5,
                                });
                            }
                        }
                    })
                },
                colorValue2(coloer_E2) {
                    let that = this
                    // console.log('coloer_E2', coloer_E2);
                    this.checked2 = coloer_E2 == true ? 1 : 0;
                    this.getList()
                    this.getCm()

                },

                matchAllSizes(sizeData, dataList) {
                    console.log('dataList赛选', dataList)
                    // 首先提取所有尺寸信息到一个扁平化的对象，方便快速查找
                    const sizeMap = {};

                    sizeData.forEach(group => {
                        console.log('group.data[0].sizes', group)
                        group.sizes.forEach(size => {
                            sizeMap[size.sizeid] = size.sizename;
                        });
                    });

                    // 遍历 dataList，为每个项添加匹配的尺寸信息
                    // return dataList.map(item => {
                    //     const matchedSize = sizeMap[item.sizeid] || '未知尺寸';
                    //     return {
                    //         ...item,
                    //         sizename: matchedSize
                    //     };
                    // });

                },

                getScreenList() {
                    let that = this
                    $.ajax({
                        url: 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx',
                        type: "post",
                        data: JSON.stringify({
                            api: "dhh_GetAttrib.t",
                            token: this.token,
                        }),
                        success: (res) => {
                            if (res.code == 200) {
                                this.stylesList = res.data;
                                this.selectScreeList = Array.from({ length: this.stylesList.length || 0 }, () => []);
                            } else {
                                that.$Message.error({
                                    content: "暂无数据",
                                    duration: 5,
                                });
                            }
                        }
                    })
                },
                // 筛选后重新请求
                getScreen() {
                    this.attribsData = {};
                    this.selectScreeList.forEach((item, index) => {
                        if (item.length > 0) {
                            this.attribsData['attrib' + Number(this.stylesList[index].attribdef)] = item.join(',')
                        }
                    })
                    this.getList()
                },
                openScreen() {
                    this.screeShow = true;
                    this.getScreenList();
                },
                enlarged(data) {
                    this.imgEnlarged = true;
                    this.url = this.imgurl + data.image1_path
                },
                getQueryParam(param) {
                    const search = window.location.search.substring(1); // 去掉开头的 '?'
                    const params = search.split('&');
                    for (let i = 0; i < params.length; i++) {
                        const [key, value] = params[i].split('=');
                        if (key === param) {
                            return decodeURIComponent(value); // 解码 URL 编码的字符
                        }
                    }
                    return null; // 参数不存在
                },
                sortAscending() {
                    this.isAscending = true;

                    this.getList()
                },
                sortDescending() {
                    this.isAscending = false;

                    this.getList()

                },
                //订货数量
                sortAscending1() {
                    this.isAscending1 = true;
                    this.getList()

                },
                sortDescending1() {
                    this.isAscending1 = false;
                    this.getList()
                },
                getList() {
                    let that = this
                    const orderidValue = this.getQueryParam('orderid');
                    $.ajax({
                        url: this.url,
                        type: "post",
                        data: JSON.stringify({
                            orderid: orderidValue,
                            api: "dhh_GetStyleOrder.t",
                            token: this.token,
                            stylestatus: that.shopActiveIndex,
                            storestatus: that.shopActivefsPIndex,
                            isclr: this.checked,//颜色
                            issize: this.checked2,//尺寸
                            grouptype: that.shopActivefhzsPIndex,//经销商
                            // rank_type_1: this.rankingAmount,
                            // rank_type_2: this.stylesRanking,
                            // rank_type_3: this.regional,
                            attribs: this.attribsData,
                            access_token: this.access_token,
                            // style: this.queryTest
                        }),
                        success: (res) => {
                            if (res.code == 200) {
                                this.dataList = res.data.map((item, index) => {
                                    return {
                                        ...item,
                                        index: index + 1 // 添加序号，从 1 开始
                                    }
                                })
                                const copyArray = JSON.parse(JSON.stringify(this.dataList));

                                return this.dataList.sort((a, b) => {
                                    return this.isAscending ? b.index - a.index : a.index - b.index;
                                });
                                return this.dataList.sort((a, b) => {
                                    return this.isAscending1 ? b.qty - a.qty : a.qty - b.qty;
                                });

                            } else {
                                that.$Message.error({
                                    content: "暂无数据",
                                    duration: 5,
                                });
                            }
                        }
                    })
                },
                getQueryData() {
                    let oSearchItem = {};
                    let searchString = window.location.search;
                    let reg = /[?&][^?&]+=[^?&]+/g;
                    let arr = searchString.match(reg);
                    if (arr) {
                        arr.forEach((item) => {
                            let tempArr = item.substring(1).split("=");
                            let key = decodeURIComponent(tempArr[0]);
                            let value = decodeURIComponent(tempArr[1]);
                            oSearchItem[key] = value;
                        });
                    }
                    return oSearchItem
                },
            },
            created() {
                if (this.getQueryData().token) {
                    console.log('this.getQueryData().token', this.getQueryData().token)
                    sessionStorage.setItem('token_', this.getQueryData().token)
                    sessionStorage.setItem('token', String(this.getQueryData().ccode) + this.getQueryData().token)
                }
            },
            mounted() {
                this.token = sessionStorage.getItem('token_') //'08CA02B70D60473399593A249F63A645'1
                this.access_token = sessionStorage.getItem('token')
                this.url = 'http://hz.ebosserp.com/eBoss_YUN/webapi.ashx';
                // this.getScreenList()
                this.getList()
            }
        });
        const element = document.getElementById('app');
        const hammer = new Hammer(element);
        hammer.on('swipe', function (ev) {
            switch (ev.direction) {
                // case Hammer.DIRECTION_LEFT:
                // 	alert('Swiped left');
                // 	break;
                case Hammer.DIRECTION_RIGHT:
                    window.history.go(-1)
                    break;
                // 可以添加其他方向的处理...  
            }
        })
    </script>

</body>

</html>